<!DOCTYPE html>
<html lang="ch">
<head>
    <title></title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：内置指令总结
        v-bind:单向绑定解析表达式，可简写为：xxx
        v-model:双向数据绑定
        v-for:遍历数组、对象、字符串
        v-if:条件渲染(动态控制节点是否存在)
        v-else: 条件渲染
        v-show：条件渲染

        v-text：向其所在的节点中渲染文本内容(标签体)
        2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

    -->
    <div id="demo">
        <h2>{{name}}</h2>
        <div>会拼接{{lab}}</div>
        <div v-text="lab">完全被替换</div>
    </div>
    <script type="text/javascript">
    Vue.config.productionTip = false //关闭生产提示
    new Vue({
        el:"#demo",
        data:{
            name:"test",
            lab:"<h1>测试</h1>"

        }
    })
    </script>
</body>
</html>